<template>
  <div class="promo-outer">
    <ul class="promo">
      <li
        v-for="promo of props.promoList"
        :key="promo.home_id">
        <RouterLink
          :to="`/detail?goods_id=${promo.goods_id}`"
          target="_blank">
          <img
            v-lazyload="promo.imgUrl"
            alt="" />
        </RouterLink>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  promoList: Object
})
</script>

<style lang="less" scoped>
.promo-outer {
  width: 978px;
  height: 170px;
  .promo {
    display: flex;
    justify-content: space-between;
    li {
      float: left;
      width: 316px;
      height: 170px;
      transition: box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear;
      &:hover {
        box-shadow: 0 3px 4px 0 rgb(0 0 0 / 18%);
      }
      a {
        img {
          display: block;
          width: 316px;
          height: 170px;
        }
      }
    }
  }
}
</style>
